<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0" />
		<title></title>
		<link rel="stylesheet" href="css/tai.css" />
	</head>
	<body>
		<div id="wrap">
			<div class="scrollBar"></div>
			<div class="head">
				<div class="head-top">
					<!--logo-->
					<h1 class="logo">
						<a href="http://www.atguigu.com">
							<img src="img/logo.png" />
						</a>
					</h1>
					<!--面包屑导航-->
					<a href="javascript:;" class="menuBtn"></a>
					<!--按钮排-->
					<div class="btns">
						<a href="javascript:;" class="search">搜索</a>
						<a href="javascript:;">登录</a>
						<a href="javascript:;">注册</a>
					</div>
				</div>
				<div class="head-bottom">
					<form  method="post">
						<input type="text" placeholder="请碰我一下" />
						<input type="submit" value="搜索"/>
					</form>
				</div>
				<ul class="mask">
					<li>
						<a href="javascript:;">首页</a>
					</li>
					<li>
						<a href="javascript:;">MV</a>
					</li>
					<li>
						<a href="javascript:;">悦单</a>
					</li>
					<li>
						<a href="javascript:;">V榜</a>
					</li>
					<li>
						<a href="javascript:;">音乐</a>
					</li>
					<li>
						<a href="javascript:;">商城</a>
					</li>
					<li>
						<a href="javascript:;">节目</a>
					</li>
					<li>
						<a href="javascript:;">饭团</a>
					</li>
					<li>
						<a href="javascript:;">咨询</a>
					</li>
					<li>
						<a href="javascript:;">我的家</a>
					</li>
					<li>
						<a href="javascript:;">APP下载</a>
					</li>
					<li>
						<a href="javascript:;">热门应用</a>
					</li>
				</ul>
			</div>
			<div class="content">
				<div>
					<!--导航-->
					<div class="damu-nav-drag-wrapper">
						<ul class="list">
							<li>
								<a href="javascript:;" class="active">首页</a>
							</li>
							<li>
								<a href="javascript:;">MV</a>
							</li>
							<li>
								<a href="javascript:;">悦单</a>
							</li>
							<li>
								<a href="javascript:;">V榜</a>
							</li>
							<li>
								<a href="javascript:;">音乐</a>
							</li>
							<li>
								<a href="javascript:;">商城</a>
							</li>
							<li>
								<a href="javascript:;">节目</a>
							</li>
							<li>
								<a href="javascript:;">饭团</a>
							</li>
							<li>
								<a href="javascript:;">咨询</a>
							</li>
							<li>
								<a href="javascript:;">我的家</a>
							</li>
							<li>
								<a href="javascript:;">APP下载</a>
							</li>
							<li>
								<a href="javascript:;">热门应用</a>
							</li>
							<li>
								<a href="javascript:;">晓飞张</a>
							</li>
							<li>
								<a href="javascript:;">金龙油</a>
							</li>
							<li>
								<a href="javascript:;">邱海峰</a>
							</li>
							<li>
								<a href="javascript:;">小贱贱</a>
							</li>
							<li>
								<a href="javascript:;">你</a>
							</li>
						</ul>
					</div>
					<!--无缝滑屏-->
					<div class="carousel-wrap" needAuto needCarousel >
						<div class="points-wrap"></div>
					</div>
					<!--tap选项卡-->
					<div class="tap-wrap">
						<div class="tap-head">
							<h2>MV主播</h2>
							<span>更多&gt</span>
						</div>
						<div class="tap-nav">
							<a href="javascript:;">全部</a>
							<a href="javascript:;">内地</a>
							<a href="javascript:;">刚果人民共和国</a>
							<a href="javascript:;">欧美</a>
							<a href="javascript:;">韩国</a>
							<a href="javascript:;">日本</a>
							<div class="smallG"></div>
						</div>
						<div class="tap-content">
							<ul class="tap-loading"></ul>
							<ul>
								<li>
									<a href="javascript:;">
										<img src="img/a.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/b.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/c.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/d.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/e.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/f.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
							</ul>
							<ul class="tap-loading"></ul>
						</div>
					</div>
					<div class="tap-wrap">
						<div class="tap-head">
							<h2>MV主播</h2>
							<span>更多&gt</span>
						</div>
						<div class="tap-nav">
							<a href="javascript:;">全部</a>
							<a href="javascript:;">内地</a>
							<a href="javascript:;">港台</a>
							<a href="javascript:;">欧美</a>
							<a href="javascript:;">韩国</a>
							<a href="javascript:;">日本</a>
							<div class="smallG"></div>
						</div>
						<div class="tap-content">
							<ul class="tap-loading"></ul>
							<ul>
								<li>
									<a href="javascript:;">
										<img src="img/a.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/b.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/c.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/d.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/e.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/f.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
							</ul>
							<ul class="tap-loading"></ul>
						</div>
					</div>
					<div class="tap-wrap">
						<div class="tap-head">
							<h2>MV主播</h2>
							<span>更多&gt</span>
						</div>
						<div class="tap-nav">
							<a href="javascript:;">全部</a>
							<a href="javascript:;">内地</a>
							<a href="javascript:;">港台</a>
							<a href="javascript:;">欧美</a>
							<a href="javascript:;">韩国</a>
							<a href="javascript:;">日本</a>
							<div class="smallG"></div>
						</div>
						<div class="tap-content">
							<ul class="tap-loading"></ul>
							<ul>
								<li>
									<a href="javascript:;">
										<img src="img/a.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/b.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/c.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/d.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/e.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/f.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
							</ul>
							<ul class="tap-loading"></ul>
						</div>
					</div>
					<div class="tap-wrap">
						<div class="tap-head">
							<h2>MV主播</h2>
							<span>更多&gt</span>
						</div>
						<div class="tap-nav">
							<a href="javascript:;">全部</a>
							<a href="javascript:;">内地</a>
							<a href="javascript:;">港台</a>
							<a href="javascript:;">欧美</a>
							<a href="javascript:;">韩国</a>
							<a href="javascript:;">日本</a>
							<div class="smallG"></div>
						</div>
						<div class="tap-content">
							<ul class="tap-loading"></ul>
							<ul>
								<li>
									<a href="javascript:;">
										<img src="img/a.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/b.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/c.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/d.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/e.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/f.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
							</ul>
							<ul class="tap-loading"></ul>
						</div>
					</div>
					<div class="tap-wrap">
						<div class="tap-head">
							<h2>MV主播</h2>
							<span>更多&gt</span>
						</div>
						<div class="tap-nav">
							<a href="javascript:;">全部</a>
							<a href="javascript:;">内地</a>
							<a href="javascript:;">港台</a>
							<a href="javascript:;">欧美</a>
							<a href="javascript:;">韩国</a>
							<a href="javascript:;">日本</a>
							<div class="smallG"></div>
						</div>
						<div class="tap-content">
							<ul class="tap-loading"></ul>
							<ul>
								<li>
									<a href="javascript:;">
										<img src="img/a.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/b.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/c.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/d.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/e.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
								<li>
									<a href="javascript:;">
										<img src="img/f.jpg"/>
										<span>君に贈る花がないがないがないがないがないがないがない</span>
									</a>
									<div class="tap-discuss">
										<div class="right">
											<span></span>
											<span>9176</span>
										</div>
										<div class="left">
											<span></span>
											<span>6</span>
										</div>
									</div>
								</li>
							</ul>
							<ul class="tap-loading"></ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/tools.js"></script>
	<script src="js/transform.js"></script>
	<script src="js/damu.js"></script>
	<script type="text/javascript">
		window.onload=function(){
			//全局事件默认行为的禁止
			document.addEventListener("touchstart",function(ev){
				ev=ev||event;
				ev.preventDefault();
			})
			
			//rem适配方案
			;(function(){
				var styleNode = document.createElement("style");
				var w = document.documentElement.clientWidth/16;
				styleNode.innerHTML="html{font-size:"+w+"px!important}";
				document.head.appendChild(styleNode);				
			})()
			
			//头部效果
			head();
			function head(){
				var aNodes = document.querySelectorAll("#wrap .head .head-top .btns a");
				var headBottom = document.querySelector("#wrap .head .head-bottom");
				var bar = document.querySelector("#wrap .scrollBar");
				var head = document.querySelector("#wrap .head");
				var h = head.offsetHeight;
				var flag = true;
				aNodes[0].addEventListener("touchend",function(){
					//滚动条滚过头部高度时
					if(damu.css(bar,"translateY")>h){
						
						if(flag){
							headBottom.style.display="none";
						}else{
							headBottom.style.display="block";
						}
						flag=!flag;
					}
				})
			}
			
			//竖向滑屏
			vMove();
			function vMove(){
				var headBottom = document.querySelector("#wrap .head .head-bottom");
				var head = document.querySelector("#wrap .head");
				var h = head.offsetHeight;
				var content = document.querySelector("#wrap .content");
				var wrap = document.querySelector("#wrap .content > div");
				var bar = document.querySelector("#wrap .scrollBar");
				var scale = document.documentElement.clientHeight/(head.offsetHeight+wrap.offsetHeight);
				bar.style.height = document.documentElement.clientHeight*scale+"px";
				var callback={
					start:function(){
						bar.style.opacity=1;
					},
					move:function(){
						var scale = damu.css(this,"translateY")/(wrap.offsetHeight - content.clientHeight);
						//scale = 实时距离/最大距离
						damu.css(bar,"translateY",-scale*(document.documentElement.clientHeight -bar.offsetHeight ));
						
						if(damu.css(bar,"translateY")>h){
							headBottom.style.display="none";
							// flag = false;
						}else if(damu.css(bar,"translateY")<h){
							headBottom.style.display="block";
							// flag = true;
						}
					},
					autoMove:function(){
						var scale = damu.css(this,"translateY")/(wrap.offsetHeight - content.clientHeight);
						//scale = 实时距离/最大距离
						damu.css(bar,"translateY",-scale*(document.documentElement.clientHeight -bar.offsetHeight ));
					},
					end:function(){
						bar.style.opacity=0;
					}
				}
				damu.vMove(content,callback);					
			}
			
			//tab选项卡
			tap();
			function tap(){
				var  wrap = document.querySelector("#wrap .content .tap-wrap");
				var  contentNodes = document.querySelectorAll("#wrap .content .tap-wrap .tap-content");
				//var  loadings =  document.querySelectorAll("#wrap .content .tap-wrap .tap-content .tap-loading");
				// var w = wrap.offsetWidth;
                var w = document.documentElement.clientWidth;
				for(var i=0;i<contentNodes.length;i++){
					move(contentNodes[i]);
				}
				
				
				function move(content){
					//抽象小绿的下标
					var  now = 0;
					var  smallG = content.parentNode.querySelector(".tap-nav .smallG");
					var  aNodes = content.parentNode.querySelectorAll(".tap-nav a");
					var  loadings =  content.querySelectorAll(".tap-loading");
					damu.css(content,"translateX",-w);
					smallG.style.width=aNodes[0].offsetWidth+"px";
					//滑屏逻辑 content既是滑屏区域又是滑屏元素
					
					//var startPoint={x:0,y:0};
					var startPoint={};
					var elementPoint={x:0,y:0};
					var isX = true;
					var isFirst = true;
					
					
					//在1/2 跳转时  让整个jump逻辑干干净净的只触发一次
					var isOver =false;
					content.addEventListener("touchstart",function(ev){
						//isOver =false;
						
						
						if(isOver){
							return;
						}
						ev = ev||event;
						var touchC = ev.changedTouches[0];
						//快照
						//startPoint = {clientX:touchC.clientX,clientY:touchC.clientY};
						startPoint = touchC;
						elementPoint.x=damu.css(content,"translateX");
						elementPoint.y=damu.css(content,"translateY");
						
						isX = true;
						isFirst = true;
						
						
						content.style.transition = "none";
					})
					content.addEventListener("touchmove",function(ev){
						if(isOver){
							return;
						}
						if(!isX){
							return;
						}
						
						ev = ev||event;
						var touchC = ev.changedTouches[0];
						
						var nowPoint={};
						var dis ={x:0,y:0};
						nowPoint= touchC;
						dis.x = nowPoint.clientX - startPoint.clientX ;//0
						dis.y = nowPoint.clientY - startPoint.clientY ;//0
						
						if(isFirst){
							isFirst = false;
							if(Math.abs(dis.y) > Math.abs(dis.x)){
								isX = false;
								return;
							}
						}
						
						var translateX = elementPoint.x + dis.x;
						damu.css(content,"translateX",translateX);
						
						
						jump(dis.x);
					})
					content.addEventListener("touchend",function(ev){
						if(isOver){
							return;
						}
						ev = ev||event;
						var touchC = ev.changedTouches[0];
						var nowPoint={};
						var dis ={x:0,y:0};
						nowPoint= touchC;
						dis.x = nowPoint.clientX - startPoint.clientX ;
						
						if( Math.abs(dis.x) <= w/2 ){
							content.style.transition = "1s transform";
							damu.css(content,"translateX",-w);
						}
					})
					
					//1/2 跳转  ---> 请求
					function jump(disX){
						if(isOver){
							return;
						}
						if( Math.abs(disX) >w/2 ){
								isOver=true;
								content.style.transition = "1s transform";
								var targetX = disX>0?0:-2*w;
								damu.css(content,"translateX",targetX);
								
								//请求一定要在动画执行完毕之后再发,
								content.addEventListener("transitionend",endFn);
								content.addEventListener("webkitTransitionEnd",endFn);
								
								function endFn(){
									/*
									 循环定时器   				回调函数的头部第一行清定时器
									DOM2 绑定 transitionend事件    回调函数的头部第一行解绑事件
									*/
									content.removeEventListener("transitionend",endFn);
									content.removeEventListener("webkitTransitionEnd",endFn);
									content.style.transition = "none";
									/*超过 1/2
									 * 1.一开始loading图是隐藏的,loading图需要出现（ 1/2跳转后  请求发送前）
									 * 2.发送请求  处理请求  完成数据的渲染
									 * 		必须动画（content去0 或者 -2w位置）完成之后，再去进行这一系列的逻辑
									 * 								----   content要回到-w的位置
									 * */
									for(var i=0;i<loadings.length;i++){
										loadings[i].style.opacity = 1;
									}
									
									//对now进行控制
									//往右滑 --   往左滑++
									disX>0?now--:now++;
									if(now<0){
										now = aNodes.length-1;
									}else if(now>aNodes.length-1){
										now = 0;
									}
									damu.css(smallG,"translateX",aNodes[now].offsetLeft);
									if(aNodes[now].offsetWidth != smallG.offsetWidth){
										smallG.style.width=aNodes[now].offsetWidth+"px";
									}
									
									//发ajax请求  去服务端拿数据（学完node之后来发一发）
									//优雅
									setTimeout(function(){
										//成功  content要回到-w的位置  loading图隐藏
										
										for(var i=0;i<loadings.length;i++){
											loadings[i].style.opacity = 0;
										}
										damu.css(content,"translateX",-w);
										
										//最后一步
										isOver =false;
									},2000)
								}
							}
					}
				}
			}
			
			//导航点击变色
			changeColor();
			function changeColor(){
				var list =  document.querySelector("#wrap .content .damu-nav-drag-wrapper .list");
				var aNodes =  document.querySelectorAll("#wrap .content .damu-nav-drag-wrapper .list>li a");
				
				list.addEventListener("touchstart",function(){
						this.isMove = false;
					})
				list.addEventListener("touchmove",function(){
					this.isMove = true;
				})
				
				list.addEventListener("touchend",function(ev){
					if(this.isMove){
						return;
					}
					ev=ev||event;
					var touchC = ev.changedTouches[0];
					for(var i=0;i<aNodes.length;i++){
						tools.removeClass(aNodes[i],"active");
					}
					tools.addClass(touchC.target,"active");
					/*if(touchC.target.nodeName.toUpperCase()==="A"){
						tools.addClass(touchC.target.parentNode,"active");
					}else if(touchC.target.nodeName.toUpperCase()==="LI"){
						tools.addClass(touchC.target,"active");
					}*/
					
				})
			}
			
			//无缝滑屏
			swiper()
			function swiper(){
				var arr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
				damu.carousel(arr);
			}
			
			//可拖拽的导航
			drag();
			function drag(){
				damu.dragNav();
			}
			
			//失获焦
			changeFocus()
			function changeFocus(){
				var inputText = document.querySelector("#wrap .head .head-bottom form input[type='text']");
				inputText.addEventListener("touchstart",function(ev){
					ev=ev||event;
					this.focus();
					ev.stopPropagation();
					ev.preventDefault();
				})
				document.addEventListener("touchstart",function(){
					inputText.blur();
				})
			}
			
			//点击切换菜单按钮
			CMCFMenuBtn();
			function CMCFMenuBtn(){
				var menuBtn = document.querySelector("#wrap .head .head-top .menuBtn");
				var mask = document.querySelector("#wrap .head .mask");
				//isXX:false  频道按钮
				//isXX:ture	  XX按钮
				var isXX=false;
				menuBtn.addEventListener("touchstart",function(ev){
					ev = ev||event;
					var touchC = ev.changedTouches[0];
					if(!isXX){
						tools.addClass(menuBtn,"active");
						mask.style.display="block";
					}else{
						tools.removeClass(menuBtn,"active");
						mask.style.display="none";
					}
					isXX=!isXX;
					ev.stopPropagation();
					ev.preventDefault();
				})
				
				document.addEventListener("touchstart",function(){
					if(isXX){
						tools.removeClass(menuBtn,"active");
						mask.style.display="none";
						isXX=!isXX;
					}
				})
				
				mask.addEventListener("touchstart",function(ev){
					ev = ev||event;
					ev.stopPropagation();
					ev.preventDefault();
				})
			}
		}
	</script>
</html>
